<template>
  <div id="films">
    <div class="header">
      <div class="swiper">
        <img :src="imgUrl" alt="" />
      </div>

      <div class="btn">
        <span></span>
        <span class="active"></span>
        <span></span>
      </div>

      <div class="city">
        <span>南京</span>
        <i class="iconfont icon-arrow-down"></i>
      </div>
    </div>

    <section>
      <tableChange></tableChange>

      <!-- <nowPlaying> </nowPlaying>
      <comingPlay></comingPlay> -->
      <router-view>
        <nowPlaying> </nowPlaying>
        <comingPlay></comingPlay>
      </router-view>
    </section>

    <tabBar></tabBar>
  </div>
</template>

<script>
import imgUrl from "../assets/3.jpg";
import nowPlaying from "./nowPlaying.vue";
import comingPlay from "./comingPlay.vue";
import tableChange from "./tableChange.vue";
import tabBar from "./tabBar.vue";
export default {
  name: "filmBar",
  data() {
    return {
      imgUrl,
    };
  },
  components: {
    nowPlaying,
    comingPlay,
    tableChange,
    tabBar,
  },
};
</script>

<style >
* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
}

html {
  font-size: calc(100vw / 750);
}

#films {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.header {
  position: relative;
  height: 420rem;
}

.header .swiper {
  width: 100%;
  height: 100%;
}

.header .swiper img {
  width: 100%;
  height: 100%;
}

.header .btn {
  width: 33rem;
  height: 7rem;
  position: absolute;
  right: 12rem;
  bottom: 10rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header .btn span {
  width: 5rem;
  height: 5rem;
  border: 1rem solid white;
  border-radius: 50%;
}

.header .btn .active {
  background-color: white;
}

.header .city {
  width: 48rem;
  height: 30rem;
  padding: 0 5rem;
  box-sizing: border-box;
  border-radius: 20rem;
  position: absolute;
  left: 7rem;
  top: 18rem;
  background-color: rgba(0, 0, 0, 0.2);
  line-height: 30rem;
  display: flex;
  justify-content: center;
}

.header .city span {
  color: white;
  font-size: 13rem;
}

.header .city .icon-arrow-down {
  color: white;
  font-size: 10rem;
}

section {
  width: 100%;
  height: auto;
}

section .table {
  width: 100%;
  height: 48rem;
  background-color: white;
}

section .table ul {
  position: relative;
  width: 100%;
  height: 100%;
  border-bottom: 1rem solid #ededed;
}

section .table ul a {
  display: block;
  float: left;
  width: 50%;
  height: 100%;
}

section .table ul a li {
  width: 100%;
  height: 100%;
  line-height: 48rem;
  text-align: center;
}

section .table ul a li span {
  color: #191a1b;
  font-size: 14rem;
}

section .table ul .active span {
  color: #ff5f16;
}

.table ul .line {
  width: 56rem;
  height: 2rem;
  background-color: #ff5f16;
  position: absolute;
  bottom: 0;
  left: 25%;
  transform: translateX(-50%);
  transition: all 0.5s;
}

.list-warp {
  width: 100%;
  min-height: 500rem;
  margin-bottom: 50rem;
}

.list-warp ul {
  padding: 0 15rem;
  height: 100%;
}

.list-warp ul a {
  display: block;
  width: 100%;
  padding: 15rem 0;
  height: 94rem;
  border-bottom: 1px solid #ededed;
}

.list-warp ul a li {
  height: 100%;
  display: flex;
  justify-content: flex-start;
}

.list-warp ul a li img {
  width: 66rem;
  height: 100%;
}

.list-warp ul a li .info {
  width: 584rem;
  height: 100%;
  padding: 0 10rem;
}

.list-warp ul a li .info .name {
  color: #191a1b;
  font-size: 16rem;
  height: 22rem;
  line-height: 22rem;
}

.list-warp ul a li .info .name span {
  display: inline-block;
  font-size: 9rem;
  color: #fff;
  background-color: #d2d6dc;
  height: 14rem;
  line-height: 14rem;
  padding: 0 2rem;
  border-radius: 2px;
  margin-left: 5rem;
}

.list-warp ul a li .info .score {
  font-size: 13rem;
  color: #797d82;
  line-height: 21rem;
}

.list-warp ul a li .info .score .grade {
  color: #ffb232;
  font-size: 14rem;
}

.list-warp ul a li .info p {
  line-height: 21rem;
}

.list-warp ul a li .info p .label {
  font-size: 13rem;
  color: #797d82;
}

.list-warp ul a li .play {
  height: 25rem;
  width: 50rem;
  color: #ff5f16;
  font-size: 13rem;
  text-align: center;
  border-radius: 2px;
  line-height: 25rem;
  border: 1rem solid #ff5f16;
  align-self: center;
  background-color: white;
}
</style>